<template>
  <el-table border stripe :data="skuObj.records" style="margin: 10px 0px">
    <el-table-column label="序号" type="index" align="center" width="80">
    </el-table-column>
    <el-table-column label="名称" prop="skuName"> </el-table-column>
    <el-table-column label="描述" prop="skuDesc"> </el-table-column>
    <el-table-column label="默认图片">
      <template #="{ row, $index }">
        <img v-if="row.skuDefaultImg" :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
        <img v-else src="./1.png" alt="" style="width: 100px; height: 100px; border-radius: 50%" />
      </template>
    </el-table-column>
    <el-table-column label="重量(千克)" prop="weight"> </el-table-column>
    <el-table-column label="价格(元)" prop="price"> </el-table-column>
    <el-table-column label="操作" width="250">
      <template #="{ row, $index }">
        <el-button :type="row.isSale == 0 ? 'success' : 'info'" :icon="row.isSale == 0 ? Top : Bottom" size="small"
          @click="changeSale(row)"></el-button>
        <el-button type="primary" size="small" :icon="Edit" @click="ElMessage({ type: 'warning', message: '开发中...' })">
        </el-button>
        <el-button type="info" size="small" :icon="InfoFilled" @click="getSkuL(row)"></el-button>
        <el-button type="danger" size="small" :icon="Delete"></el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination @current-change="getSkuList" @size-change="sizeHandler" v-model:current-page="currentPage"
    v-model:page-size="pageSize" :page-sizes="[10, 20, 30]" layout="prev, pager, next, jumper,->,sizes,total"
    :total="skuObj.total" background :pager-count="7">
  </el-pagination>

  <!-- 抽屉 
      v-model:控制抽屉显示与隐藏
    -->
  <el-drawer v-model="drawer">
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right">名称:</el-col>
      <el-col :span="18">{{drawerList.skuName}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right">描述:</el-col>
      <el-col :span="18">{{drawerList.skuDesc}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px">价格:</el-col>
      <el-col :span="18" style="line-height: 42px">{{drawerList.price}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px">平台属性:</el-col>
      <el-col :span="18" style="line-height: 30px">
        <el-tag type="success" v-for="item in drawerList.skuAttrValueList" :key="item" style="margin-left: 3px">{{ item.valueName }}</el-tag>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px">销售属性:</el-col>
      <el-col :span="18" style="line-height: 30px">
        <el-tag type="success" v-for="item in drawerList.skuSaleAttrValueList" :key="item" style="margin-left: 3px">{{ item.saleAttrValueName }}</el-tag>
      </el-col>
    </el-row>
    <el-row>
      <el-col>商品图片:</el-col>
    </el-row>
    <el-row>
      <el-col>
        <!-- 轮播图 -->
        <el-carousel indicator-position="outside" style="height:400px">
          <el-carousel-item v-for="item in drawerList.skuImageList" :key="item">
            <img :src="item.imgUrl" alt="" style="width:100%;height:300px">
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
</template>
  
<script setup lang="ts">
import { ElMessage } from "element-plus";
//引入组合式API
import { ref, onMounted, reactive } from "vue";
//引入请求函数
import { reqSkuList, reqSkuGetList } from "../../../api/product/sku/sku.ts";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  UploadFilled,
  Top,
  Bottom,
  InfoFilled,
} from "@element-plus/icons-vue";
//当前第几页
let currentPage = ref<number>(1);
//当前数据条数
let pageSize = ref<number>(10);

//存储服务器返回数据
let skuObj = reactive({});

//控制抽屉的显示与隐藏
let drawer = ref<boolean>(false);
let drawerList = ref({})
//组件挂载完毕获取一次SKU列表
onMounted(() => {
  getSkuList();
});
//封装获取SKU列表接口函数
const getSkuList = async (pager: number = 1) => {
  //修改参数
  currentPage.value = pager;
  let result = await reqSkuList(currentPage.value, pageSize.value);
  //存储服务器返回的数据
  Object.assign(skuObj, result);
};

//上架与下架按钮的回调
const changeSale = (row) => {
  //切换上架与下架按钮形态
  row.isSale == 0 ? (row.isSale = 1) : (row.isSale = 0);
  //上架与下架请求:携带SKUid,更新完上架与下架之后从新获取SKU最新列表数据
};

const sizeHandler = () => {
  getSkuList();
};

const getSkuL = async (row) => {
  drawer.value = true
  console.log(row);
  let reasult = await reqSkuGetList(row.id)
  console.log(reasult);
  drawerList.value = reasult
}
</script>
  
<style scoped>
/**深度选择器:能干什么  深度选择器有哪些  什么情况下使用**/
/**  >>>  /deep/ ::v-deep   回来咱们会花1一个小时讲解它***/
/deep/ .el-carousel__button{
   width: 20px;
   height: 20px;
   background: red;
   border-radius: 50%;
}
</style>